<template>
  <nav class="navbar">
    <div class="navbar-container">
      <!-- 左侧 Logo -->
      <div class="navbar-logo">
        <span>Python私教</span>
      </div>

      <!-- 中间菜单 -->
      <ul class="navbar-menu">
        <li><span @click="emit('change-page', 'home')">首页</span></li>
        <li><span @click="emit('change-page', 'about')">关于</span></li>
        <li><span @click="emit('change-page', 'contact')">联系我们</span></li>
      </ul>

      <!-- 右侧注册/注销按钮 -->
      <div class="navbar-actions">
        <button class="btn-register" @click="emit('register')">注册</button>
        <button class="btn-logout" @click="emit('logout')">注销</button>
      </div>
    </div>
  </nav>
</template>

<script setup>
// 定义事件
const emit = defineEmits(['change-page', 'register', 'logout']);
</script>

<style scoped>
/* 导航栏样式 */
.navbar {
  box-sizing: border-box;
  background-color: #1a73e8; /* 科技蓝 */
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.navbar-logo {
  font-size: 24px;
  font-weight: 700;
  color: white;
  cursor: pointer;
}

.navbar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 30px;
}

.navbar-menu li {
  cursor: pointer;
  color: white;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s ease;
}

.navbar-menu li span {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.navbar-menu li span:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-actions {
  display: flex;
  gap: 15px;
}

.btn-register,
.btn-logout {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-register {
  background-color: #34a853; /* 绿色 */
  color: white;
}

.btn-register:hover {
  background-color: #2d8c4a;
}

.btn-logout {
  background-color: #ea4335; /* 红色 */
  color: white;
}

.btn-logout:hover {
  background-color: #c5221f;
}
</style>